import React, { useState, useEffect } from 'react'
import "./Job.scss"
import { Empty, NavBar } from 'antd-mobile'
import { UserOutline, EyeOutline } from 'antd-mobile-icons'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { getJobList } from "../../utils/request"
export default function Outcome() {
  const [data, setData] = useState([])
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const back = () => {
    navigate(-1)
  }

  useEffect(() => {
    let pname = searchParams.get("postName")
    //获取导航栏数据
    getJobList(pname).then(res => {
      setData(res.data.plist)
    })
  }, [])

  return (
    <div className='outcome'>
      <div className='outcome-top'>
        <NavBar onBack={back}>搜索结果</NavBar>
      </div>
      <div className='outcome-content'>已为你找到{data.length}个职位</div>
      <div className='outcome-bottom'>
        {
          <div className='outcome-box'>
            {
              data.map((item, index) => {
                return <div key={index} className="item" onClick={() => {
                  navigate("/position?_id=" + item._id)
                }} >
                  <div className='item-top'>
                    <div className='item-top-left'>
                      <img src={`/src/component/ysh/imgs/` + item.companyLogo} alt="" />
                      <span>{item.companyName}</span>
                    </div>
                  </div>
                  <div className='item-body'>
                    <h3>{item.postName}</h3>
                    <p>{item.companyAddress}</p>
                    <span>{item.postDesc}</span>
                  </div>
                  <div className='item-bottom'>
                    <div className='item-bottom-left'>
                      <div>
                        <UserOutline />
                      </div>
                      <span>{323}</span>
                    </div>
                    <div className='item-bottom-right'>
                      <div>
                        <EyeOutline />
                      </div>
                      <span>{item.postView}</span>
                    </div>
                  </div>
                </div>
              })
            }
          </div>
        }
      </div>
    </div>
  )
}
